import Vue from 'vue'
import App from './App.vue'
// 1. 引入vuex
import Vuex from 'vuex'

// 2. 将vuex注册到vue中
Vue.use(Vuex); // Vue.use()实际上是调用了Vuex中的install()方法.

// 3. 实例化vuex对象
const store = new Vuex.Store({
    state: {},
    // 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间.
    //  action、mutation 和 getter可以直接通过全局的方式调用, 也就是说可以通过this.$store来调用
    modules: {
        // 模块1的定义
        user: {
            // 默认情况
            // namespaced: true, 这里如果加了这段代码, 使用全局调用就会报错.
            state: {
                token: '123456'
            },
            mutations: {
                updateToken(state) {
                    state.token = '456789'
                }
            }
        },
        // 模块2的定义
        setting: {
            namespaced: true, // 高封闭性, 添加namespaced属性为true
            state: {
                name: 'modules模块化练习'
            },
            mutations: {
                updateName(state) {
                    state.name = 'modules的命名空间练习'
                }
            }
        }
    }
});

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    store // 4. 将Vuex(或叫store)对象挂载到根组件中.
}).$mount('#app')